<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">



</head>


<body class=" theme-blue">
	<style type="text/css">
	#round {
    border: 5px solid #dedede;
    -moz-border-radius: 10px;      
    -webkit-border-radius: 10px;   
    border-radius:10px;           
}
	
#tiContext {
    background:#FC9; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
}
div {
	margin: 0px;
	padding: 0px;
}

.tiContext {
	white-space: nowrap;
	height: 23px;
	width: 12em;
	overflow: hidden;
}


.bg {
	background-color: #CCC;
}
</style>

	<script type="text/javascript">
		$(document).ready(function() {
			$('input').iCheck({
				checkboxClass : 'icheckbox_polaris',
				radioClass : 'iradio_polaris',
				increaseArea : '-10%' // optional
			});
		});

		
		var a='active';
		var b='aa';
		function aa(){
			var t=a;
			b=t;
			a=b;
		}
		
		function nxTi(e) {
			/* aa();
			 $("#").css("background-color","#39F");  */
			var saveUrl = '${pageContext.request.contextPath}/exam/nxTi';
			
			var btnId = String(e.id);
			
			var oper = "";
			var key = "";
			var tNum = Number($("#tNum").text());
			var checkKey = $('input[name="'+String(tNum)+'"]:checked');
			//alert(checkKey.length);
			for (var i = 0; i < checkKey.length; i++) {
				key += checkKey[i].value;
			}
			
			if (tNum == null || tNum == "" || tNum == "undefined") {
				tNum = 0;
			}
			
			if(btnId == "next"){
				if(tNum < 21){
					tNum = tNum + 1;
				}else{
					tNum = 20;
				}
				oper = "next";
				
			}else if(btnId == "previous"){
				if(Number(tNum-1)>0){
					tNum = tNum - 1;
				}else{
					tNum = 1;
				}
				oper = "pre";
			}else{
				oper = "count";
			}
			
			//alert(tNum+","+key);
			if (Number(tNum) < 21&&Number(tNum)>0) {
						$.ajax({
							url : saveUrl,
							data : {
								oper:oper,
								key:key,
								tNum : tNum
							},
							type : 'post',
							async : true,
							dataType : 'json',
							contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
							success : function(data) {

								$('input:hidden[name="tiType"]').val(
										data.examTiType);

								var str = "";
								var tNum = String(data.tNum);
								var cha = "";
								var chb = "";
								var chc = "";
								var chd = "";
								//alert(key);
								if (data.key != "") {
									if (data.key.indexOf("A") >= 0) {
										cha = "checked";
									}
									if (data.key.indexOf("B") >= 0)
										chb = "checked";
									if (data.key.indexOf("C") >= 0)
										chc = "checked";
									if (data.key.indexOf("D") >= 0)
										chd = "checked";

								}
								if(data.tNum<=20){
									if (data.examTiType == 0) {
										str = "<input type='radio' name='"+tNum+"' "+cha+" value='A' id='A"+tNum+"'/>A.<label for='A"+tNum+"'>"
										+ data.examTiOptiona
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chb+"  value='B' id='B"+tNum+"'/>B.<label for='B"+tNum+"'>"
										+ data.examTiOptionb
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chc+" value='C' id='C"+tNum+"'/>C.<label for='C"+tNum+"'>"
										+ data.examTiOptionc
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chd+"  value='D' id='D"+tNum+"'/>D.<label for='D"+tNum+"'>"
										+ data.examTiOptiond + "</label>";
									} else {
										str = "<input type='checkbox' name='"+tNum+"' "+cha+"  value='A' id='A"+tNum+"'/>A.<label for='A"+tNum+"'>"
										+ data.examTiOptiona
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chb+" value='B' id='B"+tNum+"'/>B.<label for='B"+tNum+"'>"
										+ data.examTiOptionb
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chc+"  value='C' id='C"+tNum+"'/>C.<label for='C"+tNum+"'>"
										+ data.examTiOptionc
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chd+" value='D' id='D"+tNum+"'/>D.<label for='D"+tNum+"'>"
										+ data.examTiOptiond + "</label>";
									}
								
									$('#tNum').text(data.tNum);
									$('#title').html(data.examTiName);
									$('#point').text(data.examTiPoint);
								}
								$('#tiContext').html(str);

								$(document).ready(function() {
									$('input').iCheck({
										checkboxClass : 'icheckbox_polaris',
										radioClass : 'iradio_polaris',
										increaseArea : '-10%' // optional
									});
								});
								
								if(data.tNum==20){
									alert("已经是最后一题");
								}

							},
							error : function() {
								alert("异常！");
							}
						});
			}

		}

		function nextTi(e) {
			var key = "";
			var checkKey = $('input[name="'+String(e.innerText)+'"]:checked');
			//alert(checkKey.length);
			for (var i = 0; i < checkKey.length; i++) {
				key += checkKey[i].value;
			}
			var tNum = e.innerText;
			var index = $("#index").val();
			//alert(tNum+","+key+","+index);
			var saveUrl = '${pageContext.request.contextPath}/exam/nextTi';
			$.ajax({
						url : saveUrl,
						data : {
							index : index,
							key : key,
							tNum : tNum
						},
						type : 'post',
						async : true,
						dataType : 'json',
						contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
						success : function(data) {
							$('input:hidden[name="tiType"]').val(
									data.examTiType);

							//alert(data.examTiKey);
							var tNum = String(data.tNum);
							var cha = "";
							var chb = "";
							var chc = "";
							var chd = "";
							if (data.key != "") {
								if (data.key.indexOf("A") >= 0) {
									cha = "checked";
								}
								if (data.key.indexOf("B") >= 0)
									chb = "checked";
								if (data.key.indexOf("C") >= 0)
									chc = "checked";
								if (data.key.indexOf("D") >= 0)
									chd = "checked";

							}
							
							//alert(data.examTiKey);
							//alert(data.tNum+"fdsafasdfasd");

							if (data.examTiType == 0) {
								str = "<input type='radio' name='"+tNum+"' "+cha+" value='A' id='A"+tNum+"'/>A.<label for='A"+tNum+"'>"
										+ data.examTiOptiona
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chb+"  value='B' id='B"+tNum+"'/>B.<label for='B"+tNum+"'>"
										+ data.examTiOptionb
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chc+" value='C' id='C"+tNum+"'/>C.<label for='C"+tNum+"'>"
										+ data.examTiOptionc
										+ "</label><br/>"
										+ "<input type='radio' name='"+tNum+"' "+chd+"  value='D' id='D"+tNum+"'/>D.<label for='D"+tNum+"'>"
										+ data.examTiOptiond + "</label>";
							} else {
								str = "<input type='checkbox' name='"+tNum+"' "+cha+"  value='A' id='A"+tNum+"'/>A.<label for='A"+tNum+"'>"
										+ data.examTiOptiona
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chb+" value='B' id='B"+tNum+"'/>B.<label for='B"+tNum+"'>"
										+ data.examTiOptionb
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chc+"  value='C' id='C"+tNum+"'/>C.<label for='C"+tNum+"'>"
										+ data.examTiOptionc
										+ "</label><br/>"
										+ "<input type='checkbox' name='"+tNum+"' "+chd+" value='D' id='D"+tNum+"'/>D.<label for='D"+tNum+"'>"
										+ data.examTiOptiond + "</label>";
							}

							$('#tiContext').html(str);

							$(document).ready(function() {
								$('input').iCheck({
									checkboxClass : 'icheckbox_polaris',
									radioClass : 'iradio_polaris',
									increaseArea : '-10%' // optional
								});
							});
							$('#point').text(data.examTiPoint);
							$('#tNum').text(data.tNum);
							$('#title').html(data.examTiName);
							$('#index').val(data.index);
						},
						error : function() {
							alert("异常！");
						}
					});
		}

		$(document).ready(function() {
			/* var haha = document.getElementById("ti").value; 
			// var haha = document.getElementsByName("ti").innerHTML;
			alert(haha);
			var haha = e.replace('/n', '<br/>');
			alert(haha);  */
			var tiType = $('input:hidden[name="tiType"]').val();
			//alert(tiType);

			$("#message").delay(1500).slideUp("normal");

			$("#user").click(function() {
				$.confrim({
					title : 'Confirm!',
					content : 'Confirm! Confirm! Confirm!',
					confirm : function() {
						alert('the user clicked confirm');
					},
					cancel : function() {
						alert('the user clicked cancel')
					}
				});
			});

		});

		function isDelete() {
			if (window.confirm("Are you sure delete?"))

				return true;
			else {
				return false;
			}

		}
		
		function submitKey(){
			/* alert("ss");
			var tNum = Number($("#tNum").text());
			var checkKey = $('input[name="'+String(tNum)+'"]:checked');
			//alert(checkKey.length);
			for (var i = 0; i < checkKey.length; i++) {
				key += checkKey[i].value;
			}
			
			alert(key); */
		}

		function count() {
			var countUrl = "${pageContext.request.contextPath}/exam/count";
			var subId = $("#subId").val();
		
			$.ajax({
						url : countUrl,
						data : {
							subId : subId
						},
						type : 'post',
						async : true,
						dataType : 'json',
						success : function(data) {
							if (data.state == "0") {
								if (window.confirm("还没有完成，是否提交？")) {
									alert("得分：" + data.count);
									window.location.href = "${pageContext.request.contextPath}/exam/grade";
								}
							} else {
								alert("得分：" + data.count);
								window.location.href = "${pageContext.request.contextPath}/exam/grade";
							}
						},
						error : function() {
							alert("异常！");
						}
					});
		}
		
	</script>
	
	
	<!-- 定义一个倒计时 -->
<script type="text/javascript">
//var time = document.forms[0].date.value;

var totalTime = ${subVO.examSubjectTotaltime };
var startTime = new Date();//这里的new Date()换成你后台传递的时间
var EndTime=startTime.getTime()+Number(totalTime)*60*1000+1000;//这个设置倒计时的时间，按毫秒算，也即60*1000就是一分钟
function GetRTime(){
var NowTime = new Date();
var nMS =EndTime - NowTime.getTime();
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
if (nH<=0 && nM <=0 && nS <=0) {
  alert("时间到了，提交...");
   document.exam.submit();
}
 document.getElementById("RemainH").innerHTML=nH;
 document.getElementById("RemainM").innerHTML=nM;
 document.getElementById("RemainS").innerHTML=nS;
setTimeout("GetRTime()",1000);
}
window.onload=GetRTime;

</script>




   <!--  
     <script type="text/javaScript">
            禁止右击 
           document.oncontextmenu = function() { return false;}
           禁止F5刷新 
           document.onkeydown = function() { return false;}
     </script> -->

	<div class="content">



		<div class="main-content">



			<input type="hidden" name="subId" value="${subjectId }" /> 
						<input type="hidden" id="key" value="" />
							<input type="hidden" id="tiType" value="" />
							<input type="hidden" id="index" value="-1" />
							
			

			<table style="margin-top:80px;margin-left:50px;">

				<tbody>

					<tr>
						<td style="height: 10px; text-align: center; font-weight: bold;"><div id="round">
							科目名称:${subVO.examSubjectName}&nbsp;&nbsp;题数:${subVO.examSubjectTnumber }<br />
							考试时间:<span id="totalTime">${subVO.examSubjectTotaltime }</span><br />
							 <input type="hidden" id="subId" value="${subVO.examSubjectId }" />
							  <!-- 倒计时 -->
							<div id="sidebar2">
								<h2>
									距离考试结束还有：<br /> <font color="#ff0000"><strong
										id="RemainH">XX</strong>时<strong id="RemainM">XX</strong>分<strong
										id="RemainS">XX</strong>秒</font>
								</h2>
							</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<strong>选择题，<span id="point">${tiVO.examTiPoint }</span>分</strong>
						</td>
					</tr>
					
						<tr>
						<td width="800px;">
							<div style="background-color:#ccc;border-radius:10px;">
								<span id="tNum">${tNumber}</span><%=". "%><span id="title">${tiVO.examTiName }</span>
							</div>
						</td>
					</tr>
					
					


					<tr>
						<td>
							
							<div id="tiContext" style="min-height:90px;">
								<c:choose>
									<c:when test="${tiVO.examTiType eq 0 }">
										<input type="radio" name="1" value="A" id="A" /><%="A."%><label onclick="submitKey()"
											for="A">${tiVO.examTiOptiona }</label>
										<br />
										<input type="radio" name="1" value="B" id="B" /><%="B."%><label onclick="submitKey()"
											for="B">${tiVO.examTiOptionb }</label>
										<br />
										<input type="radio" name="1" value="C" id="C" /><%="C."%><label onclick="submitKey()"
											for="C">${tiVO.examTiOptionc }</label>
										<br />
										<input type="radio" name="1" value="D" id="D" /><%="D."%><label onclick="submitKey()"
											for="D">${tiVO.examTiOptiond }</label>
									</c:when>
									<c:otherwise>
										<input type="checkbox" name="1" value="A" id="A" /><%="A."%><label onclick="submitKey()"
											for="A">${tiVO.examTiOptiona }</label>
										<br />
										<input type="checkbox" name="1" value="B" id="B" /><%="B."%><label onclick="submitKey()"
											for="B">${tiVO.examTiOptionb }</label>
										<br />
										<input type="checkbox" name="1" value="C" id="C" /><%="C."%><label onclick="submitKey()"
											for="C">${tiVO.examTiOptionc }</label>
										<br />
										<input type="checkbox" name="1" value="D" id="D" /><%="D."%><label onclick="submitKey()"
											for="D">${tiVO.examTiOptiond }</label>
									</c:otherwise>
								</c:choose>
							</div></td>
					</tr>
					<tr>
						<td align="right"><input type="button" style="margin-right:50px;margin-top:-70px;" class="btn btn-primary" value="上一题" id="previous"
							onclick="nxTi(this)" />
							<input type="button" style="margin-right:100px;margin-top:-70px;" class="btn btn-primary" value="下一题" id="next"
							onclick="nxTi(this)" />
						</td>
					</tr>
				</tbody>
			</table>
</body>
</html>
